<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            width: 100%;
            height: 100%;
        }
        
        body {
            width: 100%;
            height: 100%;
        }
        
        #one {
            width: 100%;
            height: 100%;
            position: relative;
            border: 1px solid red;
        }
        
        #one1 {
            width: 49%;
            height: 700px;
            background: yellow;
            border: 1px solid green;
        }
        
        #one2 {
            width: 49%;
            height: 700px;
            position: absolute;
            top: 0px;
            right: 0px;
            border: 1px solid lightseagreen;
        }
        
        img {
            position: absolute;
        }
        
        section {
            width: 100%;
            height: 40px;
            margin-top: 40px;
            border: 1px solid red;
        }
        
        #x1 {
            display: none;
            z-index: 1;
            opacity: 1;
            
        }
        
        #x2 {
            display: none;
            opacity: 0;
        }
        
        #x3 {
            display: none;
            opacity: 0;
        }
        
        #x4 {
            display: none;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="one">
        <div id="one1">
            <img src="index/tab-1.png" id='x0' alt="">
            <img src="index/tab-2.png" id="x1" alt="">
            <img src="index/tab-3.png" id="x2" alt="">
            <img src="index/tab-4.png" id="x3" alt="">
        </div>
        <div id="one2">
            <section id="s1">1</section>
            <section id="s2">2</section>
            <section id="s3">3</section>
            <section id="s4">4</section>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        var secs = document.querySelectorAll('section')


        for (var i = 0; i < secs.length; i++) {
            secs[i].a = i
        }
        var last = ''
        $('section').mouseenter(function (e) {
            if (last != e.target) {
                $('img').eq(e.target.a).css('display', 'block').animate({
                    opacity:'1'
                },300)
                $('img').eq(last.a).css('display', 'none').animate({
                    opacity:'0'
                },300)
            }

            $(this).mouseleave(function (event) {
//              console.log(event.target)
                
                last = event.target
//              console.log(last)
            })
        })
    </script>
</body>

</html>